<template>
  <div class="container">
    <Menu></Menu>
    <div class="box">
      <div class="box-my">
        <div class="box-my-top">
          <div class="box-my-top-main">
            <t-upload
              :headers="{
                Authorization: Authorization,
                id: userId,
              }"
              theme="file"
              action="http://localhost:1023/oss/save"
              @success="handleSuccess"
            >
              <img v-if="userInfo.avatar" class="box-my-top-main-avatar" :src="userInfo.avatar" alt="" />
              <img v-else class="box-my-top-main-avatar" src="@/assets/datou.jpg" alt="" />
            </t-upload>
            <div class="box-my-top-main-right">
              <div class="box-my-top-main-right-name">
                昵称：{{ userInfo.nickname }}
                <t-button
                  v-if="route.params.id == userInfo.leiId"
                  style="height: 26px; margin-left: 12px"
                  @click="visible = true"
                  >修改资料</t-button
                >
                <span v-else-if="!followUserDTO.isFollow">
                  <t-button style="height: 26px; margin-left: 12px" @click="following">关注</t-button>
                  <t-button style="height: 26px; margin-left: 12px">私信</t-button>
                </span>

                <t-button v-else theme="default" variant="base" @click="following">已关注</t-button>
                <t-dialog v-model:visible="visible" @confirm="updateUser">
                  <t-form style="display: flex">
                    <div class="dialog-left" style="margin-right: 44px">
                      <t-form-item label="昵称" name="name" initial-data="TDesign">
                        <t-input v-model="userInfo.nickname" placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item label="性别" name="gender">
                        <t-radio-group v-model="userInfo.sex">
                          <t-radio value="1">男</t-radio>
                          <t-radio value="0">女</t-radio>
                        </t-radio-group>
                      </t-form-item>
                      <t-form-item label="年龄" name="age">
                        <t-input-number v-model="userInfo.age" />
                      </t-form-item>
                      <t-form-item label="住址" name="name" initial-data="TDesign">
                        <t-input v-model="userInfo.address" placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item label="生日" name="name" initial-data="TDesign">
                        <t-date-picker v-model="userInfo.birthday" />
                      </t-form-item>
                      <t-form-item label="兴趣" name="name" initial-data="TDesign">
                        <t-input v-model="userInfo.hobby" placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item label="目标" name="name" initial-data="TDesign">
                        <t-input v-model="userInfo.goal" placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item label="学校" name="name" initial-data="TDesign">
                        <t-input v-model="userInfo.school" placeholder="请输入内容" />
                      </t-form-item>
                    </div>
                    <div class="dialog-right">
                      <t-form-item label="专业" name="name" initial-data="TDesign">
                        <t-input v-model="userInfo.profession" placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item label="学历" name="name" initial-data="TDesign">
                        <t-input v-model="userInfo.education" placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item label="毕业年份" name="name" initial-data="TDesign">
                        <t-date-picker v-model="userInfo.graduation" />
                      </t-form-item>
                      <t-form-item label="工作状态" name="gender">
                        <t-radio-group v-model="userInfo.workStatus">
                          <t-radio value="1">在业</t-radio>
                          <t-radio value="0">待业</t-radio>
                        </t-radio-group>
                      </t-form-item>
                      <t-form-item label="公司" name="name" initial-data="TDesign">
                        <t-input v-model="userInfo.company" placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item label="岗位" name="name" initial-data="TDesign">
                        <t-input v-model="userInfo.job" placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item label="工作年限" name="age">
                        <t-input-number v-model="userInfo.workYear" />
                      </t-form-item>
                    </div>
                  </t-form>
                </t-dialog>
              </div>
              <div class="box-my-top-main-right-des">ID：{{ userId }}</div>
              <div>个人简介：{{ userInfo.introduction ? userInfo.introduction : '我是一只神奇呆瓜' }}</div>
            </div>
          </div>
          <div class="box-my-top-bottom">
            <div class="box-my-top-bottom-item">
              <span class="box-my-top-bottom-item-text">积分</span>
              <span class="box-my-top-bottom-item-num">0</span>
            </div>
            <div class="box-my-top-bottom-item">
              <span class="box-my-top-bottom-item-text">获赞</span>
              <span class="box-my-top-bottom-item-num">{{ userLikeCount }}</span>
            </div>
            <div class="box-my-top-bottom-item">
              <span class="box-my-top-bottom-item-text">关注</span>
              <span class="box-my-top-bottom-item-num">{{ followingUsers.length }}</span>
            </div>
            <div class="box-my-top-bottom-item">
              <span class="box-my-top-bottom-item-text">粉丝</span>
              <span class="box-my-top-bottom-item-num">{{ fans.length }}</span>
            </div>
            <div class="box-my-top-bottom-item"></div>
          </div>
        </div>
        <div class="box-my-content">
          <div class="box-my-content-main">
            <t-space direction="vertical" style="width: 100%">
              <t-tabs
                :default-value="1"
                drag-sort
                :value="value"
                :scroll-position="'auto'"
                @drag-sort="onDragend"
                @change="onTabChange"
              >
                <t-tab-panel
                  v-for="data in panelData"
                  :key="data.value"
                  :value="data.value"
                  :label="data.label"
                  :draggable="data.draggable"
                >
                  <div v-if="value == '1'">
                    <div class="box-my-content-main-article">
                      <div v-for="article in articleList" :key="article.leiId" class="box-my-content-main-article-item">
                        <div class="box-my-content-main-article-item-top">
                          <img
                            v-if="article.avatar"
                            class="box-my-content-main-article-item-top-avatar"
                            :src="article.avatar"
                            alt=""
                          />
                          <img
                            v-else
                            class="box-my-content-main-article-item-top-avatar"
                            src="../../assets/datou.jpg"
                            alt=""
                          />
                          <div class="box-my-content-main-article-item-top-right">
                            <div class="box-my-content-main-article-item-top-name">{{ userInfo.nickname }}</div>
                            <div class="box-my-content-main-article-item-top-des">why youchild not see light</div>
                          </div>
                        </div>
                        <div class="box-my-content-main-article-item-title">
                          {{ article.articleTitle }}
                        </div>
                        <div class="box-my-content-main-article-item-shit">
                          <div class="box-my-content-main-article-item-shit-content">
                            {{ article.articleContent }}
                          </div>
                          <img class="box-my-content-main-article-item-shit-img" :src="article.articleImage" alt="" />
                        </div>
                        <div class="box-my-content-main-article-item-topic">
                          <span v-for="(label, shit) in article.labelInfos.data" :key="shit"
                            >#{{ label.labelName }}</span
                          >
                        </div>
                        <div class="box-my-content-main-article-item-bottom">
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="like(article.leiId, articleList)"
                          >
                            <ThumbUp2Icon :class="article.isLiked ? 'like-active' : ''" size="18" /><span>
                              {{ article.likeCount }}
                            </span>
                          </div>
                          <div class="box-my-content-main-article-item-bottom-item" @click="showComment(article.leiId)">
                            <div
                              v-if="article.isShowComment"
                              style="color: #0052d9; font-size: 14px"
                              @click="addCommentDTO.articleId = null"
                            >
                              <ChatBubble1Icon size="18" /><span>收起评论</span>
                            </div>
                            <div v-else @click="showComment(key, article)">
                              <ChatBubble1Icon size="18" /><span>99+</span>
                            </div>
                          </div>
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="star(article.leiId, articleList)"
                          >
                            <HeartIcon :class="article.isStar ? 'star-active' : ''" size="18" /><span>
                              {{ article.starCount }}
                            </span>
                          </div>
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="share(article.leiId, articleList)"
                          >
                            <Share1Icon :class="article.isShared ? 'share-active' : ''" size="18" /><span>{{
                              article.shareCount
                            }}</span>
                          </div>
                        </div>
                        <!-- 评论上方输入框 -->
                        <div v-if="article.isShowComment" class="box-my-content-main-article-item-comment">
                          <img
                            v-if="userInfo.avatar"
                            class="box-my-content-main-article-item-comment-avatar"
                            :src="userInfo.avatar"
                            alt=""
                          />
                          <img
                            v-else
                            class="box-my-content-main-article-item-comment-avatar"
                            src="../../assets/datou.jpg"
                            alt=""
                          />
                          <div style="width: 80%">
                            <div class="box-my-content-main-article-item-comment-top-content">
                              <t-textarea
                                v-model="addCommentDTO.commentContent"
                                placeholder="别社恐了，来聊天~"
                                name="description"
                                :autosize="{ minRows: 3, maxRows: 8 }"
                              />
                            </div>
                            <div class="box-my-content-main-article-item-comment-top-bottom">
                              <div class="box-my-content-main-article-item-comment-top-bottom-left">
                                <div class="box-my-content-main-article-item-comment-top-bottom-left-item">
                                  <ImageIcon /><span style="margin-left: 2px; margin-bottom: 0.24px">图片</span>
                                </div>
                              </div>
                              <t-button
                                class="box-my-content-main-article-item-comment-top-bottom-btn"
                                theme="primary"
                                shape="round"
                                variant="base"
                                @click="addComment"
                                >发布</t-button
                              >
                            </div>
                          </div>
                        </div>
                        <!-- 评论 -->
                        <div v-if="article.isShowComment">
                          <div
                            v-for="comment in article.comments"
                            :key="comment.leiId"
                            class="box-my-content-main-article-item-reply"
                          >
                            <div class="box-my-content-main-article-item-reply-top">
                              <img
                                class="box-my-content-main-article-item-reply-top-avatar"
                                :src="comment.avatar"
                                alt=""
                              />
                              <div class="box-my-content-main-article-item-reply-top-des">
                                <div class="box-my-content-main-article-item-reply-top-des-name">
                                  {{ comment.nickName }}
                                </div>
                                <div class="box-my-content-main-article-item-reply-top-des-time">2099年发布</div>
                              </div>
                            </div>
                            <div class="box-my-content-main-article-item-reply-shit">
                              <div class="box-my-content-main-article-item-reply-shit-content">
                                {{ comment.commentContent }}
                              </div>
                              <img class="box-my-content-main-article-item-reply-shit-img" :src="comment.imgUrl" />
                            </div>
                            <div class="box-my-content-main-article-item-reply-bottom">
                              <div class="box-my-content-main-article-item-reply-bottom-item">发布于1999年</div>
                              <div
                                class="box-my-content-main-article-item-reply-bottom-item"
                                @click="likeComment(comment)"
                              >
                                <ThumbUp2Icon :class="comment.isLiked ? 'like-active' : ''" size="18" /><span>
                                  {{ comment.likeCount }}
                                </span>
                              </div>
                              <div class="box-my-content-main-article-item-reply-bottom-item">回复</div>
                            </div>
                          </div>
                        </div>
                        <t-divider></t-divider>
                      </div>
                    </div>
                  </div>
                  <div v-if="value == '2'">
                    <div class="box-my-content-main-info">
                      <div class="box-my-content-main-info-top">
                        <span class="box-my-content-main-info-top-title">基本信息</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">性别</span>
                        <span>{{ userInfo.sex ? '男' : '女' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">年龄</span>
                        <span>{{ userInfo.age ? userInfo.age : '0' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">住址</span>
                        <span>{{ userInfo.address ? userInfo.address : '美丽地球村' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">生日</span>
                        <span>{{ userInfo.birthday ? userInfo.birthday : '还没出生' }}</span>
                      </div>
                    </div>
                    <t-divider></t-divider>
                    <div class="box-my-content-main-info">
                      <div class="box-my-content-main-info-top">
                        <span class="box-my-content-main-info-top-title">学习信息</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">兴趣</span>
                        <span>{{ userInfo.hobby ? userInfo.hobby : '发帖子' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">目标</span>
                        <span>{{ userInfo.goal ? userInfo.goal : '发够1000个帖子' }}</span>
                      </div>
                    </div>
                    <t-divider></t-divider>
                    <div class="box-my-content-main-info">
                      <div class="box-my-content-main-info-top">
                        <span class="box-my-content-main-info-top-title">教育信息</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">学校</span>
                        <span>{{ userInfo.school ? userInfo.school : '美丽机电园' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">专业</span>
                        <span>{{ userInfo.profession ? userInfo.profession : '狗屎计算鸡' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">学历</span>
                        <span>{{ userInfo.education ? userInfo.education : '未来的院士' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">毕业年份</span>
                        <span>{{ userInfo.graduation ? userInfo.graduation : '延毕了' }}</span>
                      </div>
                    </div>
                    <t-divider></t-divider>
                    <div class="box-my-content-main-info">
                      <div class="box-my-content-main-info-top">
                        <span class="box-my-content-main-info-top-title">职业信息</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">工作状态</span>
                        <span>{{ userInfo.workStatus ? '工作中' : '待业' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">公司</span>
                        <span>{{ userInfo.company ? userInfo.company : '找不到工作' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">岗位</span>
                        <span>{{ userInfo.job ? userInfo.job : '🐴🐴🐴🐴🐴🐴🐴🐴🐴🐴' }}</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">工作年限</span>
                        <span>{{ userInfo.workYear ? userInfo.workYear : '屎' }}</span>
                      </div>
                    </div>
                    <t-divider></t-divider>
                    <div class="box-my-content-main-info">
                      <div class="box-my-content-main-info-top">
                        <span class="box-my-content-main-info-top-title">其他</span>
                      </div>
                      <div class="box-my-content-main-info-item">
                        <span class="box-my-content-main-info-item-title">注册时间</span>
                        <span>今天几号？16号咯</span>
                      </div>
                    </div>
                  </div>
                  <div v-if="value == '3'">
                    <h1 class="title">我的点赞</h1>
                    <t-divider style="margin-top: 0"></t-divider>
                    <div class="box-my-content-main-article">
                      <div
                        v-for="article in likedArticleList"
                        :key="article.leiId"
                        class="box-my-content-main-article-item"
                      >
                        <div class="box-my-content-main-article-item-top">
                          <img
                            v-if="article.avatar"
                            class="box-my-content-main-article-item-top-avatar"
                            :src="article.avatar"
                            alt=""
                          />
                          <img
                            v-else
                            class="box-my-content-main-article-item-top-avatar"
                            src="../../assets/datou.jpg"
                            alt=""
                          />
                          <div class="box-my-content-main-article-item-top-right">
                            <div class="box-my-content-main-article-item-top-name">{{ userInfo.nickname }}</div>
                            <div class="box-my-content-main-article-item-top-des">why youchild not see light</div>
                          </div>
                        </div>
                        <div class="box-my-content-main-article-item-title">
                          {{ article.articleTitle }}
                        </div>
                        <div class="box-my-content-main-article-item-shit">
                          <div class="box-my-content-main-article-item-shit-content">
                            {{ article.articleContent }}
                          </div>
                          <img class="box-my-content-main-article-item-shit-img" :src="article.articleImage" alt="" />
                        </div>
                        <div class="box-my-content-main-article-item-topic">
                          <span v-for="(label, shit) in article.labelInfos.data" :key="shit"
                            >#{{ label.labelName }}</span
                          >
                        </div>
                        <div class="box-my-content-main-article-item-bottom">
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="like(article.leiId, likedArticleList)"
                          >
                            <ThumbUp2Icon :class="article.isLiked ? 'like-active' : ''" size="18" /><span>
                              {{ article.likeCount }}
                            </span>
                          </div>
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="showComment(article.leiId, likedArticleList)"
                          >
                            <div
                              v-if="article.isShowComment"
                              style="color: #0052d9; font-size: 14px"
                              @click="addCommentDTO.articleId = null"
                            >
                              <ChatBubble1Icon size="18" /><span>收起评论</span>
                            </div>
                            <div v-else @click="showComment(key, article)">
                              <ChatBubble1Icon size="18" /><span>99+</span>
                            </div>
                          </div>
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="star(article.leiId, likedArticleList)"
                          >
                            <HeartIcon :class="article.isStar ? 'star-active' : ''" size="18" /><span>
                              {{ article.starCount }}
                            </span>
                          </div>
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="share(article.leiId, likedArticleList)"
                          >
                            <Share1Icon :class="article.isShared ? 'share-active' : ''" size="18" /><span>{{
                              article.shareCount
                            }}</span>
                          </div>
                        </div>
                        <!-- 评论上方输入框 -->
                        <div v-if="article.isShowComment" class="box-my-content-main-article-item-comment">
                          <img
                            v-if="userInfo.avatar"
                            class="box-my-content-main-article-item-comment-avatar"
                            :src="userInfo.avatar"
                            alt=""
                          />
                          <img
                            v-else
                            class="box-my-content-main-article-item-comment-avatar"
                            src="../../assets/datou.jpg"
                            alt=""
                          />
                          <div style="width: 80%">
                            <div class="box-my-content-main-article-item-comment-top-content">
                              <t-textarea
                                v-model="addCommentDTO.commentContent"
                                placeholder="别社恐了，来聊天~"
                                name="description"
                                :autosize="{ minRows: 3, maxRows: 8 }"
                              />
                            </div>
                            <div class="box-my-content-main-article-item-comment-top-bottom">
                              <div class="box-my-content-main-article-item-comment-top-bottom-left">
                                <div class="box-my-content-main-article-item-comment-top-bottom-left-item">
                                  <ImageIcon /><span style="margin-left: 2px; margin-bottom: 0.24px">图片</span>
                                </div>
                              </div>
                              <t-button
                                class="box-my-content-main-article-item-comment-top-bottom-btn"
                                theme="primary"
                                shape="round"
                                variant="base"
                                @click="addComment"
                                >发布</t-button
                              >
                            </div>
                          </div>
                        </div>
                        <!-- 评论 -->
                        <div v-if="article.isShowComment">
                          <div
                            v-for="comment in article.comments"
                            :key="comment.leiId"
                            class="box-my-content-main-article-item-reply"
                          >
                            <div class="box-my-content-main-article-item-reply-top">
                              <img
                                class="box-my-content-main-article-item-reply-top-avatar"
                                :src="comment.avatar"
                                alt=""
                              />
                              <div class="box-my-content-main-article-item-reply-top-des">
                                <div class="box-my-content-main-article-item-reply-top-des-name">
                                  {{ comment.nickName }}
                                </div>
                                <div class="box-my-content-main-article-item-reply-top-des-time">2099年发布</div>
                              </div>
                            </div>
                            <div class="box-my-content-main-article-item-reply-shit">
                              <div class="box-my-content-main-article-item-reply-shit-content">
                                {{ comment.commentContent }}
                              </div>
                              <img class="box-my-content-main-article-item-reply-shit-img" :src="comment.imgUrl" />
                            </div>
                            <div class="box-my-content-main-article-item-reply-bottom">
                              <div class="box-my-content-main-article-item-reply-bottom-item">发布于1999年</div>
                              <div
                                class="box-my-content-main-article-item-reply-bottom-item"
                                @click="likeComment(comment)"
                              >
                                <ThumbUp2Icon :class="comment.isLiked ? 'like-active' : ''" size="18" /><span>
                                  {{ comment.likeCount }}
                                </span>
                              </div>
                              <div class="box-my-content-main-article-item-reply-bottom-item">回复</div>
                            </div>
                          </div>
                        </div>
                        <t-divider style="margin-bottom: 0"></t-divider>
                      </div>
                    </div>
                    <h1 class="title">我的收藏</h1>
                    <t-divider style="margin-top: 0"></t-divider>
                    <div class="box-my-content-main-article">
                      <div
                        v-for="article in starArticleList"
                        :key="article.leiId"
                        class="box-my-content-main-article-item"
                      >
                        <div class="box-my-content-main-article-item-top">
                          <img
                            v-if="article.avatar"
                            class="box-my-content-main-article-item-top-avatar"
                            :src="article.avatar"
                            alt=""
                          />
                          <img
                            v-else
                            class="box-my-content-main-article-item-top-avatar"
                            src="../../assets/datou.jpg"
                            alt=""
                          />
                          <div class="box-my-content-main-article-item-top-right">
                            <div class="box-my-content-main-article-item-top-name">{{ userInfo.nickname }}</div>
                            <div class="box-my-content-main-article-item-top-des">why youchild not see light</div>
                          </div>
                        </div>
                        <div class="box-my-content-main-article-item-title">
                          {{ article.articleTitle }}
                        </div>
                        <div class="box-my-content-main-article-item-shit">
                          <div class="box-my-content-main-article-item-shit-content">
                            {{ article.articleContent }}
                          </div>
                          <img class="box-my-content-main-article-item-shit-img" :src="article.articleImage" alt="" />
                        </div>
                        <div class="box-my-content-main-article-item-topic">
                          <span v-for="(label, shit) in article.labelInfos.data" :key="shit"
                            >#{{ label.labelName }}</span
                          >
                        </div>
                        <div class="box-my-content-main-article-item-bottom">
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="like(article.leiId, starArticleList)"
                          >
                            <ThumbUp2Icon :class="article.isLiked ? 'like-active' : ''" size="18" /><span>
                              {{ article.likeCount }}
                            </span>
                          </div>
                          <div class="box-my-content-main-article-item-bottom-item" @click="showComment(article.leiId)">
                            <div
                              v-if="article.isShowComment"
                              style="color: #0052d9; font-size: 14px"
                              @click="addCommentDTO.articleId = null"
                            >
                              <ChatBubble1Icon size="18" /><span>收起评论</span>
                            </div>
                            <div v-else @click="showComment(key, article)">
                              <ChatBubble1Icon size="18" /><span>99+</span>
                            </div>
                          </div>
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="star(article.leiId, starArticleList)"
                          >
                            <HeartIcon :class="article.isStar ? 'star-active' : ''" size="18" /><span>
                              {{ article.starCount }}
                            </span>
                          </div>
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="share(article.leiId, starArticleList)"
                          >
                            <Share1Icon :class="article.isShared ? 'share-active' : ''" size="18" /><span>{{
                              article.shareCount
                            }}</span>
                          </div>
                        </div>
                        <!-- 评论上方输入框 -->
                        <div v-if="article.isShowComment" class="box-my-content-main-article-item-comment">
                          <img
                            v-if="userInfo.avatar"
                            class="box-my-content-main-article-item-comment-avatar"
                            :src="userInfo.avatar"
                            alt=""
                          />
                          <img
                            v-else
                            class="box-my-content-main-article-item-comment-avatar"
                            src="../../assets/datou.jpg"
                            alt=""
                          />
                          <div style="width: 80%">
                            <div class="box-my-content-main-article-item-comment-top-content">
                              <t-textarea
                                v-model="addCommentDTO.commentContent"
                                placeholder="别社恐了，来聊天~"
                                name="description"
                                :autosize="{ minRows: 3, maxRows: 8 }"
                              />
                            </div>
                            <div class="box-my-content-main-article-item-comment-top-bottom">
                              <div class="box-my-content-main-article-item-comment-top-bottom-left">
                                <div class="box-my-content-main-article-item-comment-top-bottom-left-item">
                                  <ImageIcon /><span style="margin-left: 2px; margin-bottom: 0.24px">图片</span>
                                </div>
                              </div>
                              <t-button
                                class="box-my-content-main-article-item-comment-top-bottom-btn"
                                theme="primary"
                                shape="round"
                                variant="base"
                                @click="addComment"
                                >发布</t-button
                              >
                            </div>
                          </div>
                        </div>
                        <!-- 评论 -->
                        <div v-if="article.isShowComment">
                          <div
                            v-for="comment in article.comments"
                            :key="comment.leiId"
                            class="box-my-content-main-article-item-reply"
                          >
                            <div class="box-my-content-main-article-item-reply-top">
                              <img
                                class="box-my-content-main-article-item-reply-top-avatar"
                                :src="comment.avatar"
                                alt=""
                              />
                              <div class="box-my-content-main-article-item-reply-top-des">
                                <div class="box-my-content-main-article-item-reply-top-des-name">
                                  {{ comment.nickName }}
                                </div>
                                <div class="box-my-content-main-article-item-reply-top-des-time">2099年发布</div>
                              </div>
                            </div>
                            <div class="box-my-content-main-article-item-reply-shit">
                              <div class="box-my-content-main-article-item-reply-shit-content">
                                {{ comment.commentContent }}
                              </div>
                              <img class="box-my-content-main-article-item-reply-shit-img" :src="comment.imgUrl" />
                            </div>
                            <div class="box-my-content-main-article-item-reply-bottom">
                              <div class="box-my-content-main-article-item-reply-bottom-item">发布于1999年</div>
                              <div
                                class="box-my-content-main-article-item-reply-bottom-item"
                                @click="likeComment(comment)"
                              >
                                <ThumbUp2Icon :class="comment.isLiked ? 'like-active' : ''" size="18" /><span>
                                  {{ comment.likeCount }}
                                </span>
                              </div>
                              <div class="box-my-content-main-article-item-reply-bottom-item">回复</div>
                            </div>
                          </div>
                        </div>
                        <t-divider style="margin-bottom: 10px"></t-divider>
                      </div>
                    </div>
                    <h1 class="title">我的转发</h1>
                    <t-divider style="margin-top: 0"></t-divider>
                    <div class="box-my-content-main-article">
                      <div
                        v-for="article in shareArticleList"
                        :key="article.leiId"
                        class="box-my-content-main-article-item"
                      >
                        <div class="box-my-content-main-article-item-top">
                          <img
                            v-if="article.avatar"
                            class="box-my-content-main-article-item-top-avatar"
                            :src="article.avatar"
                            alt=""
                          />
                          <img
                            v-else
                            class="box-my-content-main-article-item-top-avatar"
                            src="../../assets/datou.jpg"
                            alt=""
                          />
                          <div class="box-my-content-main-article-item-top-right">
                            <div class="box-my-content-main-article-item-top-name">{{ userInfo.nickname }}</div>
                            <div class="box-my-content-main-article-item-top-des">why youchild not see light</div>
                          </div>
                        </div>
                        <div class="box-my-content-main-article-item-title">
                          {{ article.articleTitle }}
                        </div>
                        <div class="box-my-content-main-article-item-shit">
                          <div class="box-my-content-main-article-item-shit-content">
                            {{ article.articleContent }}
                          </div>
                          <img class="box-my-content-main-article-item-shit-img" :src="article.articleImage" alt="" />
                        </div>
                        <div class="box-my-content-main-article-item-topic">
                          <span v-for="(label, shit) in article.labelInfos.data" :key="shit"
                            >#{{ label.labelName }}</span
                          >
                        </div>
                        <div class="box-my-content-main-article-item-bottom">
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="like(article.leiId, shareArticleList)"
                          >
                            <ThumbUp2Icon :class="article.isLiked ? 'like-active' : ''" size="18" /><span>
                              {{ article.likeCount }}
                            </span>
                          </div>
                          <div class="box-my-content-main-article-item-bottom-item" @click="showComment(article.leiId)">
                            <div
                              v-if="article.isShowComment"
                              style="color: #0052d9; font-size: 14px"
                              @click="addCommentDTO.articleId = null"
                            >
                              <ChatBubble1Icon size="18" /><span>收起评论</span>
                            </div>
                            <div v-else @click="showComment(key, article)">
                              <ChatBubble1Icon size="18" /><span>99+</span>
                            </div>
                          </div>
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="star(article.leiId, shareArticleList)"
                          >
                            <HeartIcon :class="article.isStar ? 'star-active' : ''" size="18" /><span>
                              {{ article.starCount }}
                            </span>
                          </div>
                          <div
                            class="box-my-content-main-article-item-bottom-item"
                            @click="share(article.leiId, shareArticleList)"
                          >
                            <Share1Icon :class="article.isShared ? 'share-active' : ''" size="18" /><span>{{
                              article.shareCount
                            }}</span>
                          </div>
                        </div>
                        <!-- 评论上方输入框 -->
                        <div v-if="article.isShowComment" class="box-my-content-main-article-item-comment">
                          <img
                            v-if="userInfo.avatar"
                            class="box-my-content-main-article-item-comment-avatar"
                            :src="userInfo.avatar"
                            alt=""
                          />
                          <img
                            v-else
                            class="box-my-content-main-article-item-comment-avatar"
                            src="../../assets/datou.jpg"
                            alt=""
                          />
                          <div style="width: 80%">
                            <div class="box-my-content-main-article-item-comment-top-content">
                              <t-textarea
                                v-model="addCommentDTO.commentContent"
                                placeholder="别社恐了，来聊天~"
                                name="description"
                                :autosize="{ minRows: 3, maxRows: 8 }"
                              />
                            </div>
                            <div class="box-my-content-main-article-item-comment-top-bottom">
                              <div class="box-my-content-main-article-item-comment-top-bottom-left">
                                <div class="box-my-content-main-article-item-comment-top-bottom-left-item">
                                  <ImageIcon /><span style="margin-left: 2px; margin-bottom: 0.24px">图片</span>
                                </div>
                              </div>
                              <t-button
                                class="box-my-content-main-article-item-comment-top-bottom-btn"
                                theme="primary"
                                shape="round"
                                variant="base"
                                @click="addComment"
                                >发布</t-button
                              >
                            </div>
                          </div>
                        </div>
                        <!-- 评论 -->
                        <div v-if="article.isShowComment">
                          <div
                            v-for="comment in article.comments"
                            :key="comment.leiId"
                            class="box-my-content-main-article-item-reply"
                          >
                            <div class="box-my-content-main-article-item-reply-top">
                              <img
                                class="box-my-content-main-article-item-reply-top-avatar"
                                :src="comment.avatar"
                                alt=""
                              />
                              <div class="box-my-content-main-article-item-reply-top-des">
                                <div class="box-my-content-main-article-item-reply-top-des-name">
                                  {{ comment.nickName }}
                                </div>
                                <div class="box-my-content-main-article-item-reply-top-des-time">2099年发布</div>
                              </div>
                            </div>
                            <div class="box-my-content-main-article-item-reply-shit">
                              <div class="box-my-content-main-article-item-reply-shit-content">
                                {{ comment.commentContent }}
                              </div>
                              <img class="box-my-content-main-article-item-reply-shit-img" :src="comment.imgUrl" />
                            </div>
                            <div class="box-my-content-main-article-item-reply-bottom">
                              <div class="box-my-content-main-article-item-reply-bottom-item">发布于1999年</div>
                              <div
                                class="box-my-content-main-article-item-reply-bottom-item"
                                @click="likeComment(comment)"
                              >
                                <ThumbUp2Icon :class="comment.isLiked ? 'like-active' : ''" size="18" /><span>
                                  {{ comment.likeCount }}
                                </span>
                              </div>
                              <div class="box-my-content-main-article-item-reply-bottom-item">回复</div>
                            </div>
                          </div>
                        </div>
                        <t-divider style="margin-bottom: 0"></t-divider>
                      </div>
                    </div>
                  </div>
                  <div v-if="value == '4'">
                    <div class="box-my-content-main-following">
                      <div v-for="user in followingUsers" :key="user.leiId" class="box-my-content-main-following-item">
                        <div class="box-my-content-main-following-item-left-box">
                          <img v-if="user.avatar" :src="user.avatar" class="box-my-content-main-following-item-left" />
                          <img v-else class="box-my-content-main-following-item-left" />
                          <div class="box-my-content-main-following-item-center">
                            <div class="box-my-content-main-following-item-center-text">
                              {{ user.nickname }}
                            </div>
                            <div class="box-my-content-main-following-item-center-desc">
                              {{ user.introduction }}
                            </div>
                          </div>
                        </div>
                        <div class="box-my-content-main-following-item-right">
                          <t-button v-if="!user.guanzhuFollow" @click="guanzhuFollowing(user)">关注</t-button>
                          <t-button v-else theme="default" variant="base" @click="guanzhuFollowing(user)"
                            >已关注</t-button
                          >
                        </div>
                        <t-divider></t-divider>
                      </div>
                    </div>
                  </div>
                  <div v-if="value == '5'">
                    <div class="box-my-content-main-following">
                      <div v-for="user in fans" :key="user.leiId" class="box-my-content-main-following-item">
                        <div class="box-my-content-main-following-item-left-box">
                          <img v-if="user.avatar" :src="user.avatar" class="box-my-content-main-following-item-left" />
                          <img v-else src="@/assets/datou.jpg" class="box-my-content-main-following-item-left" />
                          <div class="box-my-content-main-following-item-center">
                            <div class="box-my-content-main-following-item-center-text">
                              {{ user.nickname }}
                            </div>
                            <div class="box-my-content-main-following-item-center-desc">
                              {{ user.introduction }}
                            </div>
                          </div>
                        </div>
                        <div class="box-my-content-main-following-item-right">
                          <t-button v-if="!user.fansFollow" @click="fansFollowing(user)">关注</t-button>
                          <t-button v-else theme="default" variant="base" @click="fansFollowing(user)">已关注</t-button>
                        </div>
                        <t-divider></t-divider>
                      </div>
                    </div>
                  </div>
                </t-tab-panel>
              </t-tabs>
            </t-space>
          </div>
          <div class="box-my-content-sider">
            <div class="box-my-content-sider-top">
              <div class="box-my-content-sider-top-text">联系站长</div>
              <img class="box-my-content-sider-top-img" src="../../assets/me.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ChatBubble1Icon, HeartIcon, ImageIcon, Share1Icon, ThumbUp2Icon } from 'tdesign-icons-vue-next';
import { MessagePlugin, TabsProps, UploadProps } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import {
  addCommentApi,
  getCategoryByIdsApi,
  getCommentApi,
  getLabelByIdsApi,
  getUserLikeCountApi,
  getUserLikedApi,
  getUserShareApi,
  getUserStarApi,
  likeArticleApi,
  likeCommentApi,
  queryUserArticleApi,
  shareArticleApi,
  starArticleApi,
} from '@/api/article';
import { getUrlApi } from '@/api/oss';
import { followUserApi, getAllFansApi, getUserByIdApi, getUserFollowApi, isFollowApi, updateUserApi } from '@/api/user';
import Menu from '@/components/Menu.vue';

onMounted(() => {
  imgUrl.value = localStorage.getItem('imgUrl');
});

// 获取路由参数
const route = useRoute();
const router = useRouter();
// 用户获赞数量
const userLikeCount = ref(0);
// 关注的所有用户
const followingUsers = ref([]);
// 查询用户的所有粉丝
const fans = ref([]);
// 是否展示对话框
const visible = ref(false);
// 头像地址
const imgUrl = ref<String>();
const fileKey = ref('');
// 请求头需要的参数
const userId = ref(route.params.id);
const Authorization = `Bearer${localStorage.getItem('token')}`;
// 用户个人信息
const userInfo = ref({
  leiId: '',
  avatar: '',
  nickname: '',
  sex: 1,
  age: 18,
  address: '',
  introduction: '',
  birthday: '',
  hobby: '',
  goal: '',
  workStatus: 1,
  company: '',
  job: '',
  workYear: '',
  education: '',
  school: '',
  profession: '',
  graduation: '',
});
const value = ref<TabsProps['value']>('2');
const articleList = ref([]);
const likedArticleList = ref([]);
const shareArticleList = ref([]);
const starArticleList = ref([]);
const panelData = ref([
  {
    value: '1',
    label: '帖子',
    content: '帖子',
    draggable: true,
  },
  {
    value: '2',
    label: '资料',
    content: '资料',
    draggable: true,
  },
  {
    value: '3',
    label: '互动',
    content: '互动',
    draggable: true,
  },
  {
    value: '4',
    label: '关注',
    content: '关注',
    draggable: true,
  },
  {
    value: '5',
    label: '粉丝',
    content: '粉丝',
    draggable: true,
  },
]);
// 点赞收藏转发参数
const addCountDTO = ref({
  articleId: '',
  isLiked: null,
  isStar: null,
  isShared: null,
});
// 发布评论参数
const addCommentDTO = ref({
  articleId: '',
  commentContent: '',
});
// 查询评论参数
const queryCommentDTO = ref({
  articleId: '',
  current: 1,
  pageSize: 10,
});
// 点赞评论参数
const likeCommentDTO = ref({
  commentId: '',
  isLiked: 0,
});
// 关注用户参数
const followUserDTO = ref({
  userId: localStorage.getItem('id'),
  followId: userId.value,
  isFollow: false,
});

const onDragend: TabsProps['onDragSort'] = ({ currentIndex, targetIndex }) => {
  [panelData.value[currentIndex], panelData.value[targetIndex]] = [
    panelData.value[targetIndex],
    panelData.value[currentIndex],
  ];
};
const onTabChange: TabsProps['onChange'] = (newValue) => {
  value.value = newValue;
  switch (newValue) {
    case '1':
      queryUserArticle();
      break;
    case '3':
      getUserLiked();
      getUserShare();
      getUserStar();
      break;
    case '4':
      getUserFollow();
      break;
    case '5':
      getAllFans();
      break;
    default:
      break;
  }
};

const handleSuccess: UploadProps['onSuccess'] = (params) => {
  fileKey.value = params.file.response.fileKey;
  getUrl();
  MessagePlugin.success('上传成功');
};

// 获取图片地址
const getUrl = async () => {
  const res = await getUrlApi(fileKey.value, userId.value);
  userInfo.value.leiId = userId;
  userInfo.value.avatar = res;
  updateUser();
};

// 完善用户个人信息
const updateUser = async () => {
  await updateUserApi(userInfo.value);
  visible.value = false;
};

// 根据用户id查询用户信息
const getUserById = async () => {
  const res = await getUserByIdApi(userId.value);
  userInfo.value = res.data;
  userInfo.value.leiId = localStorage.getItem('id');
};
getUserById();

// 根据用户id查询用户发布的帖子
const queryUserArticle = async () => {
  const res = await queryUserArticleApi(userId.value);
  console.log(res.data);
  articleList.value.length = 0;
  res.data.forEach((item) => {
    articleList.value.push(item);
  });
  articleList.value.forEach(async (item, index) => {
    item.likeCount = res.data[index].likeCount;
    item.starCount = res.data[index].starCount;
    item.shareCount = res.data[index].shareCount;
    item.isShowComment = false;
    item.categoryInfos = await getCategoryByIdsApi({ categoryIds: res.data[index].categoryIds });
    item.labelInfos = await getLabelByIdsApi({ labelIds: res.data[index].labelIds });
  });
  console.log(articleList.value);
};

// 点赞按钮
const like = (key, list) => {
  list.forEach(async (item) => {
    if (item.leiId === key) {
      item.isLiked = !item.isLiked;
      addCountDTO.value.articleId = key;
      addCountDTO.value.isLiked = item.isLiked ? 1 : 0;
      await likeArticleApi(addCountDTO.value);
      item.likeCount += item.isLiked ? 1 : -1;
    }
  });
};

// 收藏按钮
const star = (key, list) => {
  list.forEach(async (item) => {
    if (item.leiId === key) {
      item.isStar = !item.isStar;
      addCountDTO.value.articleId = key;
      addCountDTO.value.isStar = item.isStar ? 1 : 0;
      await starArticleApi(addCountDTO.value);
      item.starCount += item.isStar ? 1 : -1;
    }
  });
};

// 转发按钮
const share = (key, list) => {
  list.forEach(async (item) => {
    if (item.leiId === key) {
      item.isShared = !item.isShared;
      addCountDTO.value.articleId = key;
      addCountDTO.value.isShared = item.isShared ? 1 : 0;
      await shareArticleApi(addCountDTO.value);
      item.shareCount += item.isShared ? 1 : -1;
    }
  });
};

// 获取当前文章的所有评论
const getComment = async () => {
  const res = await getCommentApi(queryCommentDTO.value);
  articleList.value.forEach((item) => {
    if (item.leiId === addCommentDTO.value.articleId) {
      item.comments = res.data;
      console.log(item.comments);
    }
  });
};

// 点击评论按钮
const showComment = (key, article) => {
  // 展示被点击文章的评论区
  articleList.value.forEach((item) => {
    if (item.leiId === key) {
      item.isShowComment = !item.isShowComment;
    }
  });
  addCommentDTO.value.articleId = article.leiId;
  queryCommentDTO.value.articleId = article.leiId;
  getComment();
};

// 点赞评论
const likeComment = async (comment) => {
  comment.isLiked = !comment.isLiked;
  likeCommentDTO.value.isLiked = comment.isLiked ? 1 : 0;
  likeCommentDTO.value.commentId = comment.leiId;
  await likeCommentApi(likeCommentDTO.value);
  comment.likeCount += comment.isLiked ? 1 : -1;
};

// 发布评论
const addComment = async () => {
  await addCommentApi(addCommentDTO.value);
  addCommentDTO.value.commentContent = '';
  router.go(0);
};

// 获取用户点赞的文章
const getUserLiked = async () => {
  const res = await getUserLikedApi({ userId: userId.value });
  console.log(res.data);
  likedArticleList.value.length = 0;
  res.data.forEach((item) => {
    likedArticleList.value.push(item);
  });
  likedArticleList.value.forEach(async (item, index) => {
    item.likeCount = res.data[index].likeCount;
    item.starCount = res.data[index].starCount;
    item.shareCount = res.data[index].shareCount;
    item.isShowComment = false;
    item.categoryInfos = await getCategoryByIdsApi({ categoryIds: res.data[index].categoryIds });
    item.labelInfos = await getLabelByIdsApi({ labelIds: res.data[index].labelIds });
  });
};

// 获取用户收藏的文章
const getUserStar = async () => {
  const res = await getUserStarApi({ userId: userId.value });
  starArticleList.value.length = 0;
  res.data.forEach((item) => {
    starArticleList.value.push(item);
  });
  starArticleList.value.forEach(async (item, index) => {
    item.likeCount = res.data[index].likeCount;
    item.starCount = res.data[index].starCount;
    item.shareCount = res.data[index].shareCount;
    item.isShowComment = false;
    item.categoryInfos = await getCategoryByIdsApi({ categoryIds: res.data[index].categoryIds });
    item.labelInfos = await getLabelByIdsApi({ labelIds: res.data[index].labelIds });
  });
};

// 获取用户分享的文章
const getUserShare = async () => {
  const res = await getUserShareApi({ userId: userId.value });
  shareArticleList.value.length = 0;
  res.data.forEach((item) => {
    shareArticleList.value.push(item);
  });
  shareArticleList.value.forEach(async (item, index) => {
    item.likeCount = res.data[index].likeCount;
    item.starCount = res.data[index].starCount;
    item.shareCount = res.data[index].shareCount;
    item.categoryInfos = await getCategoryByIdsApi({ categoryIds: res.data[index].categoryIds });
    item.labelInfos = await getLabelByIdsApi({ labelIds: res.data[index].labelIds });
  });
};

// 获取用户关注的所有用户
const getUserFollow = async () => {
  const res = await getUserFollowApi(userId.value);
  followingUsers.value = res.data;
  console.log(followingUsers.value);
};
getUserFollow();

// 获取所有粉丝
const getAllFans = async () => {
  const res = await getAllFansApi(userId.value);
  fans.value = res.data;
};
getAllFans();

// 点击关注
const following = async () => {
  followUserDTO.value.isFollow = !followUserDTO.value.isFollow;
  await followUserApi(followUserDTO.value);
};

// 查询用户是否被关注
const isFollow = async () => {
  const res = await isFollowApi(followUserDTO.value.userId, followUserDTO.value.followId);
  followUserDTO.value.isFollow = res.data;
};
isFollow();

// 点击关注tab栏下的关注按钮
const guanzhuFollowing = async (user) => {
  user.guanzhuFollow = !user.guanzhuFollow;
  await followUserApi({ userId: userId.value, followId: user.leiId, isFollow: user.guanzhuFollow });
};

// 点击粉丝tab栏下的关注按钮
const fansFollowing = async (user) => {
  user.fansFollow = !user.fansFollow;
  await followUserApi({ userId: userId.value, followId: user.leiId, isFollow: user.fansFollow });
};

// 获取用户获赞数量
const getUserLikeCount = async () => {
  const res = await getUserLikeCountApi(userId.value);
  userLikeCount.value = res.data;
};
getUserLikeCount();
</script>

<style scoped lang="less">
@import './index.less';
</style>
